<template>
  <div
    class="home-top"
    @mouseenter="showNavigation = true"
    @mouseleave="showNavigation = false"
  >
    <div class="home-top-content">
      <div class="home-top-wrap">
        <div class="index__hd">
          <h2 class="index__tit"><i class="icon_txt"></i></h2>
        </div>
      </div>
      <div class="mod_index_tab">
        <a class="index_tab__item">为你推荐</a
        ><a class="index_tab__item">轻音乐</a
        ><a class="index_tab__item">官方歌单</a
        ><a class="index_tab__item index_tab__item--current">背景音乐</a
        ><a class="index_tab__item">情歌</a
        ><a class="index_tab__item">网络歌曲</a>
      </div>
    </div>

    <Carousel
      :data="playlist.recomPlaylist"
      :showNavigation="showNavigation"
      comName="recommendSongs"
      :options="{ slidesPerView: 5, slidesPerGroup: 5 }"
      class="h-224"
    >
      <template #default="{ data }">
        <div>
          <router-link :to="`/playlist/${data.content_id}`">
            <div class="img-wrap">
              <i class="mod_cover__mask"></i>
              <img
                :src="`/api/getImageUrl?id=${data.album_pic_mid}`"
                alt=""
                @error.once="imgError"
              />
            </div>
          </router-link>
          <span class="link-to-playlist">
            <a href="#">{{ data.title }}</a>
          </span>
          <span class="playlist__other">播放量 : {{ data.listen_num }}</span>
        </div>
      </template>
    </Carousel>
  </div>
</template>

<script lang="ts">
export default {
  name: 'MusicHome',
}
</script>

<script lang="ts" setup>
import Carousel from '@/components/Carousel/index.vue'
import { reactive, ref, onMounted } from 'vue'
import { useHomeStore } from '@/stores/homeStore'
import req from '@/utils/request'

// 获取轮播图数据
const playlist = useHomeStore()
// 重新加载图片
const imgError = async (e: any) => {
  const res = await req.get<any, any>(e.target.src)
  e.target.src = res.data.imageUrl
}
// 展示切换按钮
const showNavigation = ref(false)
</script>

<style scoped>
.mod_cover__mask {
  position: absolute;
  width: 224px;
  height: 224px;
  background-color: rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  background-image: url('./imgs/cover_play.56974e6f.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70px 70px;
  opacity: 0;
  z-index: 999;
  cursor: pointer;
}
.mod_cover__mask:hover {
  opacity: 1;
  background-size: 80px 80px;
}
.mod_cover__mask:hover + img {
  transform: scale(1.07);
}
.home-top {
  background-image: linear-gradient(#f2f2f2, #fff);
  min-width: 1200px;
  position: relative;
}
.home-top-content {
  width: 1200px;
  margin: 0 auto;
}
.home-top-wrap {
  padding: 50px 0 24px 0;
}
.index__hd {
  position: relative;
}
.index__tit {
  display: block;
  margin: 0 auto;
  width: 196px;
  height: 40px;
  background-image: url('./imgs/index_tit.ee334dbf.png');
}
.mod_index_tab {
  text-align: center;
  height: 50px;
}
.mod_index_tab a {
  margin: 0 20px;
  font-size: 15px;
  cursor: pointer;
}
.mod_index_tab a:hover {
  color: #31c27c;
}
.img-wrap {
  width: 224px;
  height: 224px;
  margin-bottom: 15px;
  overflow: hidden;
}
.h-224 {
  height: 364px;
  box-sizing: border-box;
}
.img-wrap img {
  width: 100%;
  height: 100%;
  transition: 0.5s;
}
.link-to-playlist a {
  color: #000;
  font-size: 14px;
  line-height: 23px;
  display: block;
}
.playlist__other {
  color: #999;
  font-size: 14px;
  line-height: 22px;
}
</style>
